<template>
		<view class="player-min">
			<image class="img" :src="imgUrl" :class="musicPlayingKey?'img':'img stoped'" @click="isOpen=!isOpen"></image>
			<view class="btns">
				<view class="bgc" @click="play">
					<u-icon name="pause" v-if="musicPlayingKey"></u-icon>
					<u-icon name="play-right-fill" v-else></u-icon>
				</view>
			</view>
		</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		mounted() {},
		data() {
			return {
			};
		},
		props: {
			// imgUrl: {
			// 	type: String,
			// }
		},
		computed:{
			...mapState({
				musicPlayingKey: ({config}) => config.musicPlayingKey,
				imgUrl: ({config}) => config.imgUrl,
			})
		},
		methods:{
			// ...mapMutations({
			// 	SET_musicPlayingKey: "config/SET_musicPlayingKey",
			// }),
			play(){
				this.$au_player.selfPlay();
			},
			isOpen() {
				
			}
		}
	}
</script>

<style lang="scss">
		.player-min{
			position: fixed;
			bottom: 40%;
			z-index: 1002;
			display: flex;
			align-items: center;
			background-color: rgba(0,0,0,0.7);
			border-radius: 50rpx 15rpx 15rpx 50rpx ;
			&.open{
				border-radius: 45rpx ;
			}
			.img{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				&.stoped {
					animation-play-state: paused;
				}
				animation: rotate 10s linear .1s infinite;
				// box-shadow: 0 0 20rpx;
			}
			.btns{
				height: 100rpx;
				line-height: 100rpx;
				font-size: 48rpx;
				color: #F0F0F0;
				padding: 0 40rpx;
				transition: width 2.5s linear;
				
				.item{
					margin: 0 6rpx;
				}
				.cuIcon-playfill{
					margin-left: 12rpx;
				}
			}
		}
		@keyframes rotate {
			0% {
				transform: rotate(0deg);
			}
		
			100% {
				transform: rotate(360deg);
			}
		
		}
</style>
